<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录 - 网约车数据分析系统</title>
    <link href="http://localhost:8080/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://localhost:8080/js/jquery.min.js"></script>
    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }
        .form-signin .form-floating:focus-within {
            z-index: 2;
        }
        .form-signin input[type="text"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .alert {
            margin-bottom: 1rem;
            display: none;
        }
    </style>
</head>
<body class="text-center">
    <main class="form-signin">
        <form id="loginForm" onsubmit="return false;">
            <h1 class="h3 mb-3 fw-normal">网约车数据分析系统</h1>
            
            <!-- 错误消息 -->
            <div id="errorAlert" class="alert alert-danger" role="alert"></div>
            <div id="successAlert" class="alert alert-success" role="alert"></div>
            
            <div class="form-floating">
                <input type="text" class="form-control" id="username" name="username" 
                       placeholder="用户名" required autofocus>
                <label for="username">用户名</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" name="password" 
                       placeholder="密码" required>
                <label for="password">密码</label>
            </div>

            <div class="checkbox mb-3">
                <label>
                    <input type="checkbox" id="rememberMe" name="rememberMe"> 记住我
                </label>
            </div>

            <button class="w-100 btn btn-lg btn-primary" type="submit" onclick="handleLogin()">登录</button>
            <p class="mt-5 mb-3 text-muted">&copy; 2024 网约车数据分析系统</p>
        </form>
    </main>

    <script>
        function handleLogin() {
            // 隐藏所有提示
            $('#errorAlert, #successAlert').hide();
            
            // 表单验证
            const username = $('#username').val().trim();
            const password = $('#password').val().trim();
            
            if (!username) {
                showError('请输入用户名');
                return;
            }
            if (!password) {
                showError('请输入密码');
                return;
            }
            
            // 构造请求数据
            const loginData = {
                username: username,
                password: password,
                rememberMe: $('#rememberMe').is(':checked')
            };
            
            // 发送登录请求
            $.ajax({
                url: '/api/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(loginData),
                success: function(response) {
                    if (response.success) {
                        // 登录成功，存储token
                        localStorage.setItem('token', response.token);
                        localStorage.setItem('username', response.username);
                        
                        // 显示成功消息
                        showSuccess('登录成功，正在跳转...');
                        
                        // 跳转到首页
                        setTimeout(() => {
                            window.location.href = '/';
                        }, 1000);
                    } else {
                        showError(response.message || '登录失败');
                    }
                },
                error: function(xhr) {
                    let errorMsg = '登录失败';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    showError(errorMsg);
                }
            });
        }
        
        function showError(message) {
            $('#errorAlert').text(message).show();
            $('#successAlert').hide();
        }
        
        function showSuccess(message) {
            $('#successAlert').text(message).show();
            $('#errorAlert').hide();
        }
        
        // 监听回车事件
        $(document).on('keypress', function(e) {
            if (e.which === 13) {
                handleLogin();
            }
        });
        
        // 页面加载完成后
        $(document).ready(function() {
            // 如果是从退出登录跳转来的，显示提示消息
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('logout')) {
                showSuccess('您已成功退出系统');
            }
            if (urlParams.has('error')) {
                showError('用户名或密码错误');
            }
        });
    </script>
</body>
</html> 